<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>人事管理系统 ——公告管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
    <meta http-equiv="description" content="This is my page"/>
    <link href="../css/css.css" type="text/css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="../js/ligerUI/skins/Aqua/css/ligerui-dialog.css"/>
    <link href="../js/ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="../js/jquery-migrate-1.2.1.js"></script>
    <script src="../js/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="../js/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script>
    <script src="../js/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
    <script src="../js/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
    <link href="../css/pager.css" type="text/css" rel="stylesheet"/>

    <script src="../js/a/vue.js"></script>
    <script src="../js/a/axios-0.18.0.js"></script>
    <script src="../js/a/index.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/a/axios-config.js"></script>
</head>
<body>
<div id="notice">
    <!-- 导航 -->
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td height="10"></td>
        </tr>
        <tr>
            <td width="15" height="32"><img src="../images/main_locleft.gif" width="15" height="32"></td>
            <td class="main_locbg font2"><img src="../images/pointer.gif">&nbsp;&nbsp;&nbsp;当前位置：公告管理 &gt; 公告查询</td>
            <td width="15" height="32"><img src="../images/main_locright.gif" width="15" height="32"></td>
        </tr>
    </table>

    <table width="100%" height="90%" border="0" cellpadding="5" cellspacing="0" class="main_tabbor">
        <!-- 查询区  -->
        <tr valign="top">
            <td height="30">
                <table width="100%" border="0" cellpadding="0" cellspacing="10" class="main_tab">
                    <tr>
                        <td class="fftd">

                            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td class="font3">
                                        公告名称：<input v-model="selectNotice.title" type="text" name="title">
                                        公告内容：<input v-model="selectNotice.content" type="text" name="content">
                                        <input type="submit" @click="getNotice" value="搜索"/>
                                        <input id="delete" @click="deleteDialog = true" type="button" value="删除"/>
                                    </td>
                                </tr>
                            </table>

                            <el-dialog
                                    title="提示"
                                    :visible.sync="deleteDialog"
                                    width="30%">
                                <span>删除有风险，确认删除？</span>
                                <span slot="footer" class="dialog-footer">
                  <el-button @click="deleteDialog = false">取 消</el-button>
                  <el-button type="primary" @click="deleteNotice">确 定</el-button>
                </span>
                            </el-dialog>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <!-- 数据展示区 -->
        <tr valign="top">
            <td height="20">
                <table width="100%" border="1" cellpadding="5" cellspacing="0"
                       style="table-layout:fixed;border:#c2c6cc 1px solid; border-collapse:collapse;">
                    <tbody>
                    <col width="5%">
                    <col width="20%">
                    <col width="40%">
                    <col width="15%">
                    <col width="10%">
                    <col width="5%">
                    <col width="5%">
                    <tr class="main_trbg_tit" align="center">
                        <td><input type="checkbox" :checked="checkAll2" @click="noticeCheck()" name="checkAll"
                                   id="checkAll"></td>
                        <td>公告名称</td>
                        <td>公告内容</td>
                        <td>创建时间</td>
                        <td>公告人</td>

                        <td>操作</td>

                        <td>预览</td>
                    </tr>

                    <tr :id="createTrId(index)" v-for="(item,index) in getNoticeData" align="center" class="main_trbg"
                        style="background-color: rgb(255, 255, 255);">
                        <td><input type="checkbox" v-model="getChecked2" :id="createTdId(index)" :value="item.id"></td>
                        <td>{{item.title}}</td>
                        <td style="width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
                            {{item.content}}
                        </td>
                        <td>{{item.createTime}}</td>
                        <td>{{item.nickname}}</td>
                        <td align="center" width="40px;"><a
                                :href="'showUpdateNotice.html?id='+item.id">
                            <img title="修改" src="../images/update.gif"></a>
                        </td>

                        <td align="center" width="40px;">
                            <span @click="showPreview(item.id)"><img title="预览" src="../images/prev.gif"></span>
                        </td>
                    </tr>

                    </tbody>
                </table>
            </td>
        </tr>
        <!-- 分页标签 -->
        <tr valign="top">
            <td align="center" class="font3">
                <table width="100%" align="center" style="font-size:13px;" class="digg">
                    <tbody>
                    <tr>
                        <el-pagination
                                @size-change="changeSize"
                                @current-change="changeNum"
                                :current-page.sync="pageNum"
                                :page-sizes="[5, 10, 20]"
                                :page-size.sync="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                        <!--<td style="COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; TEXT-DECORATION: none"><span class="disabled">上一页</span><span
                                class="current">1</span><span class="disabled">下一页</span>&nbsp;跳转到&nbsp;&nbsp;<input
                                style="text-align: center;BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none"
                                type="text" size="2" id="pager_jump_page_size">&nbsp;<input type="button"
                                                                                            style="text-align: center;BORDER-RIGHT: #dedfde 1px solid; PADDING-RIGHT: 6px; BACKGROUND-POSITION: 50% bottom; BORDER-TOP: #dedfde 1px solid; PADDING-LEFT: 6px; PADDING-BOTTOM: 2px; BORDER-LEFT: #dedfde 1px solid; COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; BORDER-BOTTOM: #dedfde 1px solid; TEXT-DECORATION: none"
                                                                                            value="确定" id="pager_jump_btn"></td>-->
                    </tr>
                    <tr align="center">
                        <td style="font-size:13px;"></td>
                    </tr>
                    <tr>
                        <td style="COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; TEXT-DECORATION: none">总共<font
                                color="red">1</font>条记录，当前显示1-1条记录。
                        </td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>
    <div style="height:10px;"></div>
</div>

<script>
    new Vue({
        el: '#notice',
        data: {
            selectNotice: {}, /*查询*/
            getNoticeData: {}, /*获取公告*/
            showNotice: {}, /*预览公告*/

            deleteDialog: false,
            getChecked2: [],
            checkAll2: false,
            isChecked: false,

            //分页
            pageNum: 1,
            pageSize: 5,
            total: 0,
        },
        methods: {
            createTrId(index) {
                return "data_" + index;
            },
            createTdId(index) {
                return "box_" + index;
            },

            getNotice() {/*获取公告*/
                axios.get("/api/notice/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize,
                    {params: this.selectNotice}).then(resp => {
                    if (resp.data.code = 200) {
                        this.getNoticeData = resp.data.data.list;
                        this.pageNum = resp.data.data.pageNum
                        this.total = resp.data.data.total;
                        // this.$message.success(resp.data.msg)
                    } else if (resp.data.msg) {
                        this.$message.error(resp.data.msg)
                    } else {
                        this.$message.error("系统错误!!!")
                    }
                })
            },

            showPreview(id) {
                $.ligerDialog.open({
                    title: '预览公告',
                    height: 500,
                    url: 'previewNotice.html?id=' + id,
                    width: 750,
                    showMax: true,
                    showToggle: true,
                    showMin: true,
                    isResize: true,
                    slide: false
                })
            },

            changeSize(val) {
                this.pageSize = val;
                this.getNotice();
            },
            changeNum(val) {
                this.pageNum = val;
                this.getNotice()
            },

            noticeCheck() { /*全选*/
                let boxs = $("input[type='checkbox'][id^='box_']");
                if (this.isChecked) {
                    this.isChecked = false;
                    boxs.each(function () {
                        this.checked = false
                    })
                    this.checkAll2 = false
                    console.log("checkAllStatus:", this.checkAll2)
                } else {
                    this.checkAll2 = true
                    boxs.each(function () {
                        this.checked = true
                    });
                    console.log("checkAllStatus:", this.checkAll2)
                    this.isChecked = true;
                }
                this.getChecked2 = boxs.filter(":checked").map(function () {
                    return this.value
                }).get()/*把选中的checkbox的值返回给getChecked2*/
                console.log(this.getChecked2)
            },

            deleteNotice() {/*删除员工*/
                console.log(this.getChecked2)
                axios.post("/api/notice/removes", "ids=" + this.getChecked2)
                    .then(resp => {
                        if (resp.data.code == 200) {
                            this.getNotice();
                            this.$message.success(resp.data.msg)
                        } else if (resp.data.msg) {
                            this.$message.error(resp.data.msg);
                        } else {
                            this.$message.error("系统错误!!!");
                        }
                    })
                this.deleteDialog = false;
            },
        },
        mounted() {
            this.getNotice();
        }
    })
</script>
</body>
</html>